<template>
	<div class="add-food-wrapper">
		<header>
			<i @click="togoBack">&#8249;</i>
			<p>增加食品</p>
		</header>
		<!-- 表单部分 -->
		<div class="add-food-form">
			<label for="foodName">食品名称:</label>
			<input v-model="food.foodName" id="foodName" type="text" placeholder="请输入食品名称">

			<label for="foodExplain">食品说明:</label>
			<textarea v-model="food.foodExplain" id="foodExplain" placeholder="请输入食品说明"></textarea>

			<label for="foodPrice">食品价格:</label>
			<input v-model="food.foodPrice" id="foodPrice" type="number" placeholder="请输入食品价格">

			<label for="foodImg">食品图片链接:</label>
			<input v-model="food.foodImg" id="foodImg" type="text" placeholder="请输入图片链接">

			<label for="foodCount">食品库存:</label>
			<input v-model="food.foodCount" id="foodCount" type="number" placeholder="请输入库存数量">

			<button @click="submitFood">提交</button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'AddFood',
	data() {
		return {
			food: {
				foodName: '',
				foodExplain: '',
				foodPrice: 0,
				foodImg: '',
				foodCount: 0,
				businessId: this.$route.query.businessId // 传递的商家ID
			}
		};
	},
	methods: {
		togoBack() {
			this.$router.go(-1);
		},
		// 提交新食品信息
		submitFood() {
			// 验证必要字段是否填写完整
			if (!this.food.foodName || !this.food.foodExplain || !this.food.foodPrice || !this.food.foodImg || !this.food.foodCount) {
				alert('请填写所有字段！');
				return;
			}
			// 发送POST请求
			this.$axios.post('Food/FoodId', this.$qs.stringify({
					foodName: this.food.foodName,
					foodExplain: this.food.foodExplain,
					foodPrice: this.food.foodPrice,
					foodImg: this.food.foodImg,
					foodCount: this.food.foodCount,
					businessId: this.food.businessId // 传递商家ID
				}))
				.then(response => {
					if (response.data.result > 0) {
						alert('食品添加成功！');
						this.$router.push({
							path: '/businessManagement',
							query: { businessId: this.food.businessId }
						});
					} else {
						alert('添加失败，请稍后再试！');
					}
				})
				.catch(error => {
					console.error(error);
				});
		}
	}
};
</script>

<style scoped>
/****************** 添加食物页面样式 ******************/
.add-food-wrapper {
	width: 100%;
	height: 100%;
	padding-bottom: 30vw;
}

header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	display: flex;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
}

header i {
	font-size: 10vw;
	cursor: pointer;
}

header p {
	margin-left: 35vw;
}

/****************** 表单样式 ******************/
.add-food-form {
	margin-top: 15vw;
	padding: 4vw;
}

.add-food-form label {
	display: block;
	margin: 2vw 0;
	font-size: 4vw;
	color: #333;
}

.add-food-form input,
.add-food-form textarea {
	width: 100%;
	padding: 2vw;
	font-size: 4vw;
	margin-bottom: 4vw;
	border-radius: 5px;
	border: 1px solid #ccc;
}

.add-food-form button {
	width: 100%;
	padding: 3vw;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 4vw;
	cursor: pointer;
}

.add-food-form button:hover {
	background-color: #218838;
}
</style>
